<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>客户管理</title>
  <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />
  <link href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all" rel="stylesheet" type="text/css" />
  <script type=javascript src="${pageContext.request.contextPath}/layui/jquery2.1.1.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/table.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/form.js" ></script>
  <script type=javascript src="${pageContext.request.contextPath}/layui/lay/modules/layer.js" ></script>
</head>

<body>
  <div class="place">
    <span>位置：</span>
    <ul class="placeul">
      <li>营销管理</li>
      <li>客户管理</li>
      <li>基本内容</li>
    </ul>
  </div>

  <form class="layui-form">
    <div class="layui-form-item">
      <label class="layui-form-label">公司名称</label>
      <div class="layui-input-inline">
        <input type="text" name="company" placeholder="请输入" autocomplete="off" class="layui-input" id="company">
      </div>

      <label class="layui-form-label">客户姓名</label>
      <div class="layui-input-inline">
        <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input" id="name">
      </div>

      <label class="layui-form-label">所属区域</label>
      <div class="layui-input-inline">
        <select name="province" lay-filter="province" id="province">
          <option value="0">请选择省份</option>
        </select>
      </div>
      <div class="layui-input-inline">
        <select name="city" lay-filter="city" id="city">
          <option value="0">请选择城市</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">状态</label>
      <div class="layui-input-inline" >
        <select name="status" lay-filter=statusSelect" id="status">
          <option value="">请选择</option>
          <option value="0">不可用</option>
          <option value="1">可用</option>
        </select>
      </div>

      <label class="layui-form-label">是否分配</label>
      <div class="layui-input-inline">
        <select name="divide" lay-filter="divideSelect" id="divide">
          <option value="">请选择</option>
          <option value="0">未分配</option>
          <option value="1">已分配</option>
        </select>
      </div>

      <div class="layui-btn-container">
        <button type="button" class="layui-btn btn-search" lay-event="search">查询</button>
        <button type="button" class="layui-btn btn-add" lay-event="add">添加</button>
      </div>

    </div>

    <table id="demo" lay-filter="test"></table>
  </form>

  <div class="rightinfo" style="display: none" id="inner">
      <form class="layui-form">
          <div class="layui-form-item">
              <label class="layui-form-label">部门</label>
              <div class="layui-input-inline" >
                  <select name="department" lay-verify="required">
                      <option value="0">请选择</option>
                      <option value="市场部">市场部</option>
                      <option value="采购部">采购部</option>
                      <option value="财务部">财务部</option>
                  </select>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">职位</label>
              <div class="layui-input-inline" >
                  <select name="position" lay-verify="required">
                      <option value="0">请选择</option>
                      <option value="项目经理">项目经理</option>
                      <option value="项目副经理">项目副经理</option>
                      <option value="项目主管">项目主管</option>
                  </select>
              </div>
          </div>
          <div class="layui-form-item">
              <label class="layui-form-label">姓名</label>
              <div class="layui-input-inline" >
                  <select name="status" lay-verify="required">
                      <option value="0">请选择</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                  </select>
              </div>
          </div>
      </form>
  </div>
  <script>
    layui.use(['table', 'form','layer'], function () {
      var table = layui.table,
          form = layui.form,
          layer = layui.layer,
          $ = layui.jquery,
          util = layui.util;
      form.render();
        $.ajax({
            url: "/region/provice",
            type: "post",
            dataType: "json",
            success: function(data) {
                var json = eval("("+data+")");

                //使用循环遍历，给下拉列表赋值
                $("#province").empty();
                $("#province").append(new Option("请选择",""))
                for(var i=0;i<json.length;i++){
                    $("#province").append('<option value="'+json[i].name+'">'+json[i].name+'</option>');
                }
                form.render("select")//重新渲染 固定写法
            }
        });
//省份城市联动
        form.on('select(province)',function (data) {
            var pname=data.value;
            if(pname==''){
                $('#city').empty();
                $('#city').append('<option value="">请选择城市</option>');
            }else{
                $('#city').empty();
                $('#city').append('<option value="">请选择城市</option>');
                $.ajax({
                    url: '/region/city?pname='+pname,
                    type: 'post',
                    data: 'pname='+pname,
                    //dataType: 'json',
                    //contentType:"application/json",
                    success: function (resps) {
                        layui.$('#city').empty();
                        layui.$('#city').append('<option value="">请选择城市</option>');
                        var json=JSON.parse(resps);
                        var jsonList=eval("("+json+")");
                        for(var i=0;i<jsonList.length;i++) {
                            var name=jsonList[i].cName;
                            layui.$('#city').append(
                                '<option value="'+name+'">'+name+'</option>'
                            );
                        }
                        layui.form.render();
                    },
                    error: function () {
                        layer.closeAll('loading');
                        layer.msg('系统错误，请联系管理员', {icon: 5});
                    }
                });
            }
            form.render();
        });


        $('.btn-add').on('click', function () {
        layer.open({
          type: 2,
          shift: 2,
          title: '添加信息',
          area: ['1000px', '700px'],
          closeBtn: false,
          shadeClose: false,
          content: 'market/customer/customerAdd.jsp',
          btnAlign: 'c',
          btn: ['关闭'],
          success: function (layero, index) {
            var body = layer.getChildFrame('body', index);
            var date = new Date();
            body.find("#createTime").val(date.toLocaleString());
          },
        });
        form.render();
      });

        $('.btn-search').on('click', function () {
            var company = $('#company').val();
            var name = $('#name').val();
            var province = $('#province').val();
            var city = $('#city').val();
            var status = $('#status').val();
            var divide = $('#divide').val();
            table.reload('demo', {
                url: '/customer/getAllCustomerList',
                method: 'post',
                dataType: 'json',
                where: { //设定异步数据接口的额外参数，任意设
                    company: company,
                    name: name,
                    province: province,
                    city: city,
                    status: status,
                    divide: divide
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            form.render();
        });


      table.render({
        elem: '#demo'
        ,height: 400
        ,url: '/customer/getAllCustomerList' //数据接口
        ,page: true //开启分页
        ,limits: [1, 2, 3, 4,5]
        ,limit: 3   // 每页条数
        ,cols: [[ //表头
          {field: '_id', title: '序号', width:60, type:"numbers", fixed: 'left',align: "center" }
          ,{field: 'id', title: '序号', width:60, sort: true, fixed: 'left',align: "center" }
          ,{field: 'name', title: '客户姓名', width:70, sort: true,align: "center"}
          ,{field: 'sex', title: '性别', width:50,align: "center"}
          ,{field: 'tel', title: '联系电话', width:100,align: "center"}
          ,{field: 'company', title: '所属公司', width: 100,align: "center"}
          ,{field: 'area', title: '所属区域', width: 120,align: "center",
            templet:function(res){
              var area = res.province+res.city
              return area
            }
          }
          ,{field: 'status', title: '状态', width: 100,align: "center",
            templet:function(res){
              if(res.status=='1'){
                return '可用';
              }else{
                return '不可用';
              }
            }
          }
          ,{field: 'createTime', title: '创建时间', width: 150,align: "center",
             templet: function (res) {
                return util.toDateString(res.createTime, "yyyy-MM-dd HH:mm:ss")
             }
             }
          ,{field: 'creater', title: '创建人', width: 90,align: "center"}
          ,{field: 'finalTime', title: '分配时间', width: 150,align: "center",
              templet:function(res){
                  if(res.finalTime != null){
                      return util.toDateString(res.finalTime, "yyyy-MM-dd HH:mm:ss")
                  }else{
                      return ""
                  }
              }
          }
          ,{field: 'staff', title: '客户人员', width: 100,align: "center"}
          ,{field: 'describe', title: '描述', width: 100,align: "center"}
          ,{field: 'address', title: '联系地址', width: 100,align: "center"}
          ,{field: 'divide', title: '分配状态', width: 100,align: "center"}
          ,{title: '操作', width: 233, toolbar: '#barDemo', align: "center"}
        ]]
          ,done: function (){
            $("[data-field='id']").css('display','none');
            $("[data-field='describe']").css('display','none');
            $("[data-field='address']").css('display','none');
            $("[data-field='divide']").css('display','none');
          }
      });

      //工具条事件
      table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        //console.log(data)
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

        if(layEvent === 'detail'){ //查看
          layer.open({
            type: 2,
            shift: 2,
            title: '查看信息',
            area: ['1000px', '700px'],
            closeBtn: false,
            shadeClose: false,
            content: 'market/customer/customerView.jsp',
            btnAlign: 'c',
            btn: ['关闭'],
            success: function (layero, index) {
              var body = layer.getChildFrame('body', index);
              body.find("#name").val(data.name);
              body.find("#sex").val(data.sex);
              body.find("#company").val(data.company);
              body.find("#tel").val(data.tel);
              body.find("#address").val(data.address);
              body.find("#province").val(data.province);
              body.find("#city").val(data.city);
              body.find("#describe").val(data.describe);
              body.find("#status").val(data.status);
              body.find("#creater").val(data.creater);
              var body = layer.getChildFrame('body', index);
              var date = new Date();
              body.find("#createTime").val(date.toLocaleString());
            },
          });
          form.render();
        } else if(layEvent === 'edit'){ //修改
          layer.open({
            type: 2,
            shift: 2,
            title: '修改信息',
            area: ['1000px', '700px'],
            closeBtn: false,
            shadeClose: false,
            content: 'market/customer/customerUpdate.jsp',
              success: function (layero, index) {
                  var body = layer.getChildFrame('body', index);
                  body.find("#id").val(data.id);
                  body.find("#name").val(data.name);
                  body.find("#sex").val(data.sex);
                  body.find("#company").val(data.company);
                  body.find("#tel").val(data.tel);
                  body.find("#address").val(data.address);
                  body.find("#province").val(data.province);
                  body.find("#city").val(data.city);
                  body.find("#describe").val(data.describe);
                  body.find("#status").val(data.status);
                  body.find("#creater").val(data.creater);
                  var body = layer.getChildFrame('body', index);
                  var date = new Date();
                  body.find("#createTime").val(date.toLocaleString());
              },
            btnAlign: 'c',
            btn: ['确定','关闭'],
          });
          //form.render();
        } else if(layEvent == 'recover' || layEvent == 'cancel'){ //恢复
          if(layEvent == 'recover'){
            layer.open({
              type: 1,
              shift: 2,
              title: '提示信息',
              area: ['600px', '300px'],
              closeBtn: false,
              shadeClose: false,
              content: '是否确认恢复此条信息？',
              btnAlign: 'c',
              btn: ['确定','关闭'],
              yes: function(index, layero){
                  console.log(data)
                  $.ajax({
                      url:"/customer/updateStatus",
                      type:"POST",
                      contentType:"application/json",
                      data:JSON.stringify(data),
                      success: function (resp) {
                          layer.closeAll();
                          layer.msg(resp.message, {icon: 6});
                      },
                      error: function () {
                          layer.closeAll();
                          layer.msg('系统错误，请联系管理员', {icon: 5});
                      }
                  })
                  return false;
              },
              btn2: function (index, layero) {
                //默认关闭弹窗
              }
            });
            /* 渲染表单 */
            form.render();
          }else{//注销
              layer.open({
                  type: 1,
                  shift: 2,
                  title: '提示信息',
                  area: ['600px', '300px'],
                  closeBtn: false,
                  shadeClose: false,
                  content: '是否确认恢复此条信息？',
                  btnAlign: 'c',
                  btn: ['确定','关闭'],
                  yes: function(index, layero){
                      console.log(data)
                      $.ajax({
                          url:"/customer/updateStatus",
                          type:"POST",
                          contentType:"application/json",
                          data:JSON.stringify(data),
                          success: function (resp) {
                              layer.closeAll();
                              layer.msg(resp.message, {icon: 6});
                          },
                          error: function () {
                              layer.closeAll();
                              layer.msg('系统错误，请联系管理员', {icon: 5});
                          }
                      })
                      return false
                  },
                  btn2: function (index, layero) {
                      //默认关闭弹窗
                  }
              });
            form.render();
          }
        } else if(layEvent === 'divide') { //分配
            layer.open({
                type: 1,
                shift: 2,
                title: '提示信息',
                skin:'layui-layer-molv',
                area: ['500px', '300px'],
                closeBtn: 1,
                shadeClose: false,
                shade:0.0,
                content: $("#inner"),
                btnAlign: 'c',
                btn: ['确认', '关闭'],
            });
        }
      });
    });
  </script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
    {{# if(d.divide == '0'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    {{# } }}
    {{# if(d.status=='0'){ }}
    <a class="layui-btn  layui-btn-xs" lay-event="recover">恢复</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">注销</a>
    {{# } }}
    <a class="layui-btn layui-btn-xs" lay-event="divide">分配</a>
  </script>
</body>
</html>
